<template slot-scope="scope">
  <el-popover v-model:visible="visible" width="200">
    <template #reference>
      <el-icon @click="visible = true" style="cursor: pointer">
        <!-- <Filter /> -->
        <i class="iconfont"> <svg-icon icon-class="sousuo"></svg-icon></i>
      </el-icon>
    </template>
    <!-- 输入框 -->
    <el-input
      v-if="'input' === columnType"
      size="small"
      v-model="conditionValue"
      placeholder="请输入内容"
    >
    </el-input>
    <!-- 下拉选择 -->
    <el-select
      v-else-if="'select' === columnType"
      v-model="conditionValue"
      filterable
      clearable
      placeholder="请选择"
      :teleported="false"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <!-- 单选框 -->
    <el-radio-group v-else-if="'radio' === columnType" v-model="conditionValue">
      <el-radio
        button
        v-for="item in options"
        :key="item.value"
        :label="item.value"
        >{{ item.label }}</el-radio
      >
    </el-radio-group>
    <!-- 多级下拉选择 -->
    <el-cascader-panel
      v-else-if="'cascader' === columnType"
      v-model="conditionValue"
      :options="options"
      :props="{ checkStrictly: true }"
      size="medium"
      clearable
      filterable
    ></el-cascader-panel>
    <!-- 日期范围 -->
    <el-date-picker
      v-else-if="'date' === columnType"
      v-model="conditionValue"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      value-format="YYYY-MM-DD"
      clearable
      :teleported="false"
    >
    </el-date-picker>
    <!-- 时间范围 -->
    <el-date-picker
      v-else-if="'datetime' === columnType"
      v-model="conditionValue"
      type="datetimerange"
      range-separator="至"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
      value-format="YYYY-MM-DD HH:mm:ss"
      clearable
      :teleported="false"
    >
    </el-date-picker>

    <div style="text-align: right; margin: 10px 0px 0px 0px">
      <el-button type="primary" size="small" @click="ok">确定</el-button>
      <el-button size="small" @click="close">关闭</el-button>
    </div>
  </el-popover>
</template>

<script setup>
import { ref, onMounted } from "vue";
import request from "@/utils/axios";

const props = defineProps({
  columnCode: String,
  columnType: String,
  columnValue: [String, Number, Object, Array],
  dataUrl: String,
});
const emits = defineEmits(["search"]);

const visible = ref(false);
const options = ref([]); //数组选项

const conditionValue = ref(props.columnValue);

onMounted(() => {
  if (props.dataUrl) {
    request({
      url: props.dataUrl,
      method: "post",
    }).then((res) => {
      //console.log(res)
      options.value = res.data;
    });
  }
});
// 确定
const ok = () => {
  let obj = {};
  if (props.columnType === "input") {
    obj.value = conditionValue.value;
    obj.label = conditionValue.value;
  } else if (["select", "radio"].includes(props.columnType)) {
    obj.value = conditionValue.value;
    obj.label = findLabel(conditionValue.value);
  } else if (props.columnType === "cascader") {
    obj = currentCascaderData(conditionValue.value);
  } else if (["date", "datetime"].includes(props.columnType)) {
    if (conditionValue.value) {
      obj.value1 = conditionValue.value[0]; //开始日期
      obj.value2 = conditionValue.value[1]; //截止日期
      obj.label = obj.value1 + "至" + obj.value2;
    }
  }
  if (obj.label) {
    obj.code = props.columnCode;
    emits("search", obj);
    visible.value = false;
  }
};
// 取消
const close = () => {
  visible.value = false;
};
// 根据代码查找选项对应的名称
const findLabel = (val) => {
  if (val) {
    let obj = {};
    obj = options.value.find((item) => {
      return item.value === val;
    });
    return obj.label;
  } else {
    return "";
  }
};
// cascader选中数据是数组['110000','110100','110101']，转为对象 {level:'l3',value:'110101',label:'北京市市辖区东城区'}
// todo 优化查找 增加parent value
const currentCascaderData = (val) => {
  let obj = {};
  if (val.length > 0) {
    obj.level = "l" + val.length;
    obj.value = val[val.length - 1]; //2022-10-14修改用数组,11-7改回用单一值
    let str = "";
    val.forEach((code) => {
      str = str + findLabelInCascader(options.value, code);
    });
    obj.label = str;
  } else {
    obj.value = "";
    obj.level = "";
    obj.label = "";
  }
  return obj;
};
// 在层级数组中找code
const findLabelInCascader = (arr, val) => {
  for (const obj of arr) {
    if (obj.value === val) {
      //console.log(val, obj.label)
      return obj.label;
    }
    if (obj.children) {
      let result = findLabelInCascader(obj.children, val);
      if (result) return result;
    }
  }
  return null;
};
</script>
